<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
		<div class="zhezhao">
			<div class="denglu">
				<div class="denglulable">
					登录
				</div>
        <el-form ref="loginForm" :model="signinForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
          <div class="zhanghaolable">
            你的手机
          </div>
          <div class="zhanghaoinput">
            <el-input
              placeholder="请输入手机号"
              v-model="signinForm.loginName"
              prefix-icon="el-icon-mobile-phone">
            </el-input>
          </div>
          <div class="mimalable">
            密码
          </div>
          <div class="mimainput">
            <el-input
              placeholder="请输入密码"
              v-model="signinForm.password"
              prefix-icon="el-icon-key">
            </el-input>
          </div>
          <div class="remembercheckbox">
            <input type="checkbox" name="" id="" value="" /><span class="text-[12px] jizhuzhanghao">记住账号</span>
          </div>
        </el-form>
				<a href="#" class="text-[#FFFFFF] denglubtn" @click="userSignIn">
					登 录
				</a>
				<div class="denglufangshi flex justify-between">
					<a href="#" class="left" @click="goToSignUp">
						我要注册
					</a>
					<a href="#" class="right" @click="gosingncode">
						验证码登录
					</a>
          <a href="#" class="right" @click="goforword">
						忘记密码
					</a>
				</div>
				<a href="#" class="wechatdenglubtn">
					微信扫码登陆
				</a>
			</div>
		</div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import NavBar from "@/components/NavBar.vue"

export default {
  name: 'SignInView',
  components: {
    NavBar
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      signinForm: {
        loginName: '',
        password: ''
      },
      loginRules: {
        loginName: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
    }
  },
  methods: {
    gosingncode(){
      this.$router.push('singncode')
    },
    goforword(){
      this.$router.push('forword')
    },
    userSignIn() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.signinForm).then((res) => {
            if (res.result === 1) {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            } else {
              this.$notify({
                title: '登录失败',
                message: res.msg,
                type: 'error',
                duration: 2000
              })
            }
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    goToSignUp() {
      this.$router.push('signup')
    }
  }
}
</script>

<style>
.zhezhao {
  width: 100%;
  height: 100%;
}

.denglu {
  width: 24rem;
  background: #FFFFFF;
  margin: auto;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  margin-top: 100px;
}

.denglu .denglulable {
  font-size: 1.25rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  padding-top: 30px;
  margin-left: 2.1875rem;
}

.denglu .zhanghaolable {
  font-size: 12px;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-left: 2.1875rem;
  margin-top: 1.5625rem;
}

.denglu .zhanghaoinput {
  width: 19.375rem;
  margin-left: 2.1875rem;
  margin-top: 0.75rem;
}

.denglu .mimalable {
  font-size: 12px;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-left: 2.1875rem;
  margin-top: 0.8125rem;
}

.denglu .mimainput {
  width: 19.375rem;
  margin-left: 2.1875rem;
  margin-top: 0.75rem;
}

.denglu .remembercheckbox {
  display: flex;
  align-items: center;
  margin-top: 0.9375rem;
  margin-left: 2.1875rem;
}

.denglu .denglubtn {
  width: 19.375rem;
  height: 2.75rem;
  background: #FE7743;
  border-radius: 0.25rem;
  margin-top: 1.4375rem;
  margin-left: 2.1875rem;
  line-height: 2.75rem;
  text-align: center;
  display: block;
}

.denglu .jizhuzhanghao {
  margin-left: 0.5rem;
}

.denglu .denglufangshi {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #FE7743;
  margin-top: 0.75rem;
  margin-left: 2.1875rem;
  margin-right: 2.4375rem;
}

.denglu .wechatdenglubtn {
  margin-top: 1.5rem;
  background: #FFDFD3;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  align-self: flex-end;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FE7743;
  display: block;
}
</style>